<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上传材料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;margin-top:45px;background:#fff;position:absolute;left:0;height:100%;overflow:auto;}
			/*头部上传说明*/
			.content_top{width:7.05rem;overflow:hidden;margin:.25rem auto;background:#f3f3f3 url(../../../images/license/info_bg.png) no-repeat;background-size:100% auto;background-position:left bottom;padding:.5rem .35rem .85rem .35rem;box-sizing:border-box;border-radius:.1rem;}
			.content_top>p{font-size:.3rem;color:#666;line-height:.45rem;margin:0 0 .15rem 0;}
			.content_top>.top_info{background:#fe9e2b;color:#fff;font-size:.28rem;padding:.2rem;box-sizing:border-box;border-radius:.08rem;}
			/*材料列表*/
	        .basic_info{width:100%;float:left;padding:.15rem 0 0;margin:0;}
		    .basic_info>li{width:7.28rem;line-height:.9rem;border-bottom:1px solid #e5e5e5;float:right;}
		    .basic_info>li>label,.basic_info>li>a>label{width:1.8rem;float:left;text-align:right;font-size:.3rem;color:#333;box-sizing:border-box;padding-left:.25rem;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.3rem;color:#9d9d9d;width:5.3rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			.form_control{width:7.07rem;float:left;padding:0 .4rem;box-sizing:border-box;line-height:.9rem;color:#9d9d9d;font-size:.3rem;border:none;height:.9rem;margin:0;}
			.license_list{display:block;width:7.5rem;float:right;background:#fff;border-bottom:1px solid #e5e5e5; position: relative;}
			.list_title{width:4.5rem;float:left;font-size:.3rem;line-height:.5rem;margin-top:.42rem;color:#333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
			.gray_info{width:4.75rem;float:left;font-size:.28rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#999;margin-bottom:.42rem;line-height:.35rem;}
			.license_list .img_cont{width:.84rem;height:.86rem;float:left;border-radius:.06rem;margin-right:.15rem;text-align:center;margin-top:.46rem;margin-left:.25rem;}
			.license_list .img_cont>img{width:.5rem;margin-top:.18rem;}
			.license_list .bg_blue{background:#0cb9f7;}
			.license_list .bg_blue01{background:#0c8bf7;}
			.license_list .bg_orange{background:#ff9d3e;}
			.license_list .bg_green{background:#12c897;}
			.license_list .bg_red{background:#fc4e4e;}
			.license_list>.delete{ position: absolute; z-index: 3; width:1.5rem; top:.28rem; right: .2rem;}
			.license_list>.delete>a { width:1.3rem; display: inline-block; color:#666 ; padding-left: 0.03rem; font-size:.28rem; border: .01rem solid #e9e9e9; border-radius:.06rem ; margin:.06rem 0; line-height: .52rem; height: 0.52rem;}
			.license_list>.delete>a>.mui-icon-trash{font-size:.32rem;}
			.license_list>.delete>a>.mui-icon-compose{font-size:.32rem;}
		  	 /*上传材料*/
		    .upload_file{width:7.05rem;overflow:hidden;margin:.2rem .225rem;background:#f1f1f1;border-radius:.1rem;float:left;padding-bottom:.3rem;}
		    .upload_file .upload_btn{width:2rem;overflow:hidden;margin:.23rem auto .1rem auto;text-align:center;}
		    .upload_file .upload_btn>img{width:.8rem;}
		    .upload_file .upload_btn>p{font-size:.3rem;color:#333;margin:0;line-height:.5rem;}
		    .upload_txt{width:6.2rem;overflow:hidden;margin:0 auto;font-size:.3rem;color:#999;}
		  	.mui-btn-primary{width:6rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.45rem .75rem 2rem .75rem;float:left;font-size:.34rem;border-color:#1653fc;}
		</style>
	</head>
	<body>
		<div class="mui-content" style="background:#fff;">
			<!--头部上传说明-->
			<div class="content_top">
				<p>材料信息（说明：您所上传的材料可信等级默认为D级 ）</p>
				<div class="top_info">注：D级为用户自制材料，由用户承诺对其真实性负责，可在申请政务服务事项时直接使用。</div>
				<input type="hidden" name="attaIds" id="attaIds"/> 
				<input type="hidden" name="uploadDate" id="uploadDate"/> 
				<input type="hidden" name="delLicenseAttaIds" id="delLicenseAttaIds"/>
				<input type="hidden" id="allowSpace" />
			</div>
			<!--材料列表-->
			<ul class="basic_info">
			 	<li>
			 		<label>材料名称：</label>
			 		<span><textarea class="form_control" id="licenseName" placeholder="请输入材料名称"></textarea></span>
			 	</li>
			 	<li>
			 		<label>备注：</label>
			 		<span><textarea class="form_control" id="memo" placeholder="请输入备注"></textarea></span>
			 	</li>
		    </ul>
		    <div id="cl_list_vue">
	    	</div>
	    	<!--上传材料-->
	    	<div class="upload_file">
	    		<div class="upload_btn">
	    			<img src="../../../images/license/upload_btn.png" id="uploadImg">
	    			<p>点击添加文件</p>
	    		</div>
	    		<p class="upload_txt">可上传图片（jpg、png、gif、jpeg）、word文档、xlsx表格、pdf等格式文件</p>
	    	</div>
	    	<button type="button" class="mui-btn mui-btn-primary ripple" id="save">保存材料</button>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>
	<script type="text/javascript" src="../../../js/common.js"></script>
	<script type="text/javascript" src="../../../js/app.js" ></script>
	<script type="text/javascript" src="../../../js/vue.min.js" ></script>
	<script type="text/javascript" src="../../../js/cutImg.js" ></script>
	<script type="text/javascript" src="../../../js/file.js" ></script>
	<script>
		var oid = "";
		mui.plusReady(function() {
			getSpaceSize(getUserId());
			oid = utils.getUrlParam("oid");
			if(oid != '' && oid != undefined && oid != null){
				loadData(oid);
			}
		});
		
		/**
		 * 上传材料
		 */
		document.getElementById('uploadImg').addEventListener('tap', function() {
			subMateria($("#allowSpace").val());
		});
		
		/**
		 * 保存材料
		 */
		document.getElementById('save').addEventListener('tap', function() {
			var  licenseName = document.getElementById("licenseName").value;
			if (licenseName == '' || licenseName == undefined || licenseName == '请输入材料名称' || licenseName.trim() == '') {
				mui.toast('材料名称不能为空！');
				return false;
			}else{
				if(licenseName.length>250){
					mui.toast('材料名称不能超过250个字符！');
					return false;
				}
			}
			
			var  memo = document.getElementById("memo").value;
			if (memo != '' || memo != undefined || memo != '请输入备注' || memo.trim() != '') {
				if(memo.length>250){
					mui.toast('备注不能超过250个字符！');
					return false;
				}
			}
			
			var attaIds = document.getElementById("attaIds").value;
			if (attaIds == ''|| attaIds == undefined || attaIds.trim() == '') {
				mui.toast('至少上传一份自制材料！');
				return false;
			}
			var url = "appHttpService/appSaveNetUserLicense.do";
			var delLicenseAttaIds = document.getElementById("delLicenseAttaIds").value;
			var uploadDate = document.getElementById("uploadDate").value;
			var userId = getUserId();
			
			if(oid == '' || oid == undefined || oid == null || oid == 'null'){
				oid = '';
			}
			
			var param = 'oid='+oid + '&userId='+userId+ '&delLicenseAttaIds='+delLicenseAttaIds+ '&attaIds='+attaIds+ '&licenseName='+licenseName+ '&uploadDate='+uploadDate+ '&memo='+memo;
			utils.ajax(url,function(data){
				data = JSON.parse(data);
				if (data.code == 0 || data.code == '0' ) {
					mui.toast('保存成功！');
					setTimeout(function(){
						var workView = plus.webview.getWebviewById("my_eleclicen.html-sub");
						mui.fire(workView,"saveSuccess",{"is_true":true});
						mui.back();
					},1000)
				}else{
					mui.toast('保存出错！请联系管理员');
				    return false;
				}
			},param,null);
		});
		
		//文件上传
		function subMateria(allowSpace){
			var options = {
				'url': 'appHttpService/appUploadNetUserLicense.do',
				'success': uploadSuccess,
				datas:{
					allowSpace:allowSpace
				},
				'fail': upLoadFild,
				showWait:true
			}
			getImageWay(false,"选择文件",function(entry){
				var suffix = new Array(".jpg", ".jpeg", ".png", ".gif",".xls", ".xlsx", ".docx", ".doc",".pdf");
				var w = entry.substring(entry.lastIndexOf("."), entry.length);
				var valid = false;
				for(var i = 0; i < suffix.length; i++) {
					if(w.toLowerCase() == suffix[i]) {
						valid = true;
						break;
					}
				}
				if(valid){
					options.filepath = entry;
					uploadFile(options);
				}else{
					mui.toast("不允许的文件类型 [*" + w + "]");
				}
			})
			//上传成功回调
			function uploadSuccess (t,ele) {
				var data = JSON.parse(t.responseText);
				if(data.state == '1' && data.attas[0].success == 'true') {
					var slide_div_html = "";
					var fragment = document.createDocumentFragment();
					var div = document.createElement('div');
					div.setAttribute('id',"license_list_"+data.attas[0].attaId);
					div.className = 'license_list';
						var src = '';
						if(data.attas[0].extensionName == 'doc' || data.attas[0].extensionName == 'docx'){
							src = "../../../images/license/word.png";
						}
						if(data.attas[0].extensionName == 'gif' || data.attas[0].extensionName == 'png'|| data.attas[0].extensionName == 'jpg' || data.attas[0].extensionName == 'jpeg'){
							src = "../../../images/license/img.png";
						}
						if(data.attas[0].extensionName == 'xlsx' || data.attas[0].extensionName == 'xlsx'){
							src = "../../../images/license/excel.png";
						}
						if(data.attas[0].extensionName == 'pdf'){
							src = "../../../images/license/pdf.png";
						}
						slide_div_html += "<span class='img_cont bg_blue'><img src="+src+"></span><span class='list_title' id='list_title_"+data.attas[0].attaId+"' title='"+data.attas[0].attaId+"'>"+data.attas[0].fileOriginalName+"</span><span class='gray_info'>上传时间："+data.attas[0].uploadTime+" </span><span class='delete'><a class='ripple' id="+data.attas[0].attaId+" caseAttaSize="+data.attas[0].caseAttaSize+" fileType="+data.attas[0].extensionName+" aVal='sc'><i class='mui-icon mui-icon-trash'></i>删&nbsp;&nbsp;&nbsp;&nbsp;除</a><a class='ripple' id="+data.attas[0].attaId+" caseAttaSize="+data.attas[0].caseAttaSize+" fileType="+data.attas[0].extensionName+" aVal='cmm'><i class='mui-icon mui-icon-compose'></i>重命名</a></span>";
					div.innerHTML = slide_div_html;
					fragment.appendChild(div);
					
					document.getElementById("cl_list_vue").appendChild(fragment);
					var tempAttaId = "";
					var attaIds = document.getElementById('attaIds').value;
					if(attaIds != undefined && attaIds != null && attaIds != ''){
						tempAttaId = attaIds;
					}
					tempAttaId = tempAttaId+ data.attas[0].attaId+ ";";
					document.getElementById('attaIds').value = tempAttaId;
					$("#allowSpace").val(data.attas[0].allowSpace);//改变剩余空间容量
				}else if(data.state == '1' && (data.attas[0].success == 'false' || data.attas[0].success == false) && data.attas[0].msg != undefined){
					mui.toast(data.attas[0].msg);
				}else {
					mui.toast(data.msg?data.msg:'上传失败请重试 !');
				}
			}
			//上传失败回调
			function upLoadFild() {
				mui.toast('上传失败请重试 !');
			}
		}
		
		
		 /**
		 * 加载数据
		 * @param {Object} oid 主键
		 */
		function loadData(oid){
			var param = 'oid=' + oid;
			var url = 'appHttpService/appNetUserLicenseView.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					var netUserLicense = JSON.parse(data.netUserLicense);
					document.getElementById("licenseName").innerHTML = netUserLicense.licenseName;
					document.getElementById("memo").innerHTML = netUserLicense.memo;
					document.getElementById("uploadDate").value = utils.format(netUserLicense.uploadDate,'yyyy-MM-dd HH:mm:ss');
					document.getElementById("attaIds").value = netUserLicense.attaIds;
					
					if(data.licenseAttaList != undefined && data.licenseAttaList != null){
						var licenseAttaList = JSON.parse(data.licenseAttaList);
						var slide_div_html = "";
						for(var i in licenseAttaList){
							var src = '';
							if(licenseAttaList[i].extensionName == 'doc' || licenseAttaList[i].extensionName == 'docx'){
								src = "../../../images/license/word.png";
							}
							if(licenseAttaList[i].extensionName == 'gif' || licenseAttaList[i].extensionName == 'png'|| licenseAttaList[i].extensionName == 'jpg' || licenseAttaList[i].extensionName == 'jpeg'){
								src = "../../../images/license/img.png";
							}
							if(licenseAttaList[i].extensionName == 'xlsx' || licenseAttaList[i].extensionName == 'xlsx'){
								src = "../../../images/license/excel.png";
							}
							if(licenseAttaList[i].extensionName == 'pdf'){
								src = "../../../images/license/pdf.png";
							}
							slide_div_html += "<div class='license_list' id='license_list_"+licenseAttaList[i].oid+"'><span class='img_cont bg_blue'><img src="+src+"></span><span class='list_title' id='list_title_"+licenseAttaList[i].oid+"' title='"+licenseAttaList[i].oid+"'>"+licenseAttaList[i].originName+"</span><span class='gray_info'>上传时间："+licenseAttaList[i].uploadTime+" </span><span class='delete'><a class='ripple' id="+licenseAttaList[i].oid+" caseAttaSize="+licenseAttaList[i].attaSize+" fileType="+licenseAttaList[i].extensionName+" aVal='sc'><i class='mui-icon mui-icon-trash'></i>删&nbsp;&nbsp;&nbsp;&nbsp;除</a><a class='ripple' id="+licenseAttaList[i].oid+" caseAttaSize="+licenseAttaList[i].attaSize+" fileType="+licenseAttaList[i].extensionName+" aVal='cmm'><i class='mui-icon mui-icon-compose'></i>重命名</a></span></div>";
						}
						document.getElementById("cl_list_vue").innerHTML= slide_div_html;
					}
				}
			}, param);
		}
		
		//材料删除
		mui("body").on('tap', '.license_list .ripple', function() { 
			var a_type = this.getAttribute('aVal');
			var attaOid = this.getAttribute('id');
			if(a_type == 'sc'){
				var caseAttaSize = this.getAttribute('caseAttaSize');
				var btnArray = ['取消', '确定'];
				mui.confirm('确定要删除吗？', '提示信息', btnArray, function(e) {
					if(e.index == 1) {
						$("#license_list_" + attaOid).remove();
						var delLicenseAttaIds = $("#delLicenseAttaIds").val();
						var newDelLicenseAttaIds = delLicenseAttaIds+ attaOid+ ";";
						$("#delLicenseAttaIds").val(newDelLicenseAttaIds);
						
						var attaOids = $("#attaIds").val();
						var newattaOids = attaOids.replace(attaOid + ";", "");
						$("#attaIds").val(newattaOids);
						$("#allowSpace").val(parseInt($("#allowSpace").val())+parseInt(caseAttaSize));//改变剩余空间容量
					}
				});
			}else if(a_type == 'cmm'){
				var nameVal = document.getElementById("list_title_"+attaOid).innerText;
				mui.confirm('<input type="text" id="test" value="'+nameVal+'" />', '修改材料名称', null, function(event) {
			    var index = event.index;
			    if(index === 1) {
			        var val = document.getElementById('test').value;
			        if(val.trim() == ''){
			        	mui.toast('材料名称不能为空');
			        	return false;
			        }else if(val.length > 150){
			        	mui.toast('材料名称不能超过150个字符');
			        	return false;
			        }else if(val.trim() != null){
			        	var param = 'oid=' + attaOid+'&fileName='+val.trim();
						var url = 'appHttpService/appUpdateLicenseFileName.do';
						utils.ajax(url, function(data) {
							data = JSON.parse(data);
							if(data.code == 0) {
								mui.toast('材料名称修改成功');
								document.getElementById("list_title_"+attaOid).innerText = val.trim();
							}
						}, param);
			        }
			    }
			},'div');
			}
		});
		
		/**
		 * 获取用户剩余文件空间大小
		 */
		function getSpaceSize(userId){
			var param = 'userId=' + userId;
			var url = 'appHttpService/appGetallowSpace.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					$("#allowSpace").val(data.allowSpace);
				}
			}, param);
		}
		
		mui("body").on('tap', '.list_title', function() { 
			var attaOid = this.getAttribute('title');
			mui.confirm('<input type="text" id="test" value="'+this.innerText+'" />', '修改材料名称', null, function(event) {
			    var index = event.index;
			    if(index === 1) {
			        var val = document.getElementById('test').value;
			        if(val.trim() == ''){
			        	mui.toast('材料名称不能为空');
			        	return false;
			        }else if(val.length > 150){
			        	mui.toast('材料名称不能超过150个字符');
			        	return false;
			        }else if(val.trim() != null){
			        	var param = 'oid=' + attaOid+'&fileName='+val.trim();
						var url = 'appHttpService/appUpdateLicenseFileName.do';
						utils.ajax(url, function(data) {
							data = JSON.parse(data);
							if(data.code == 0) {
								mui.toast('材料名称修改成功');
								document.getElementById("list_title_"+attaOid).innerText = val.trim();
							}
						}, param);
			        }
			    }
			},'div');
		});
	</script>
</html>
